import React from 'react'
import { Theme, Button, Table, Heading, RadioGroup } from "@radix-ui/themes";
import "@radix-ui/themes/styles.css";

const index = () => {

  return (
    <div className='component-radix'>
      {/* <Theme accentColor="crimson" grayColor="sand" radius="large" scaling="95%"> */}
      <Theme>
        <Heading>按钮：</Heading>
        <Button>Default</Button>

        <Heading>列表：</Heading>
        <Table.Root>
          <Table.Header>
            <Table.Row>
              <Table.ColumnHeaderCell>Full name</Table.ColumnHeaderCell>
              <Table.ColumnHeaderCell>Email</Table.ColumnHeaderCell>
              <Table.ColumnHeaderCell>Group</Table.ColumnHeaderCell>
            </Table.Row>
          </Table.Header>

          <Table.Body>
            <Table.Row>
              <Table.RowHeaderCell>Danilo Sousa</Table.RowHeaderCell>
              <Table.Cell>danilo@example.com</Table.Cell>
              <Table.Cell>Developer</Table.Cell>
            </Table.Row>

            <Table.Row>
              <Table.RowHeaderCell>Zahra Ambessa</Table.RowHeaderCell>
              <Table.Cell>zahra@example.com</Table.Cell>
              <Table.Cell>Admin</Table.Cell>
            </Table.Row>

            <Table.Row>
              <Table.RowHeaderCell>Jasper Eriksson</Table.RowHeaderCell>
              <Table.Cell>jasper@example.com</Table.Cell>
              <Table.Cell>Developer</Table.Cell>
            </Table.Row>
          </Table.Body>
        </Table.Root>

        <Heading>单选按钮组：</Heading>

        <RadioGroup.Root defaultValue="1" name="example">
          <RadioGroup.Item value="1">Default</RadioGroup.Item>
          <RadioGroup.Item value="2">Comfortable</RadioGroup.Item>
          <RadioGroup.Item value="3">Compact</RadioGroup.Item>
        </RadioGroup.Root>
      </Theme>
    </div>
  )
}

export default index